<template>
	<view class="paypage">
		<delivery-layout :deliveryInfo="deliveryInfo"></delivery-layout>
		<view class="goodsList">
			<goods-list :goodsList="carsList" :totalPrice="totalPrice" :prePrice="disPrice"></goods-list>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="paytype">
			<view class="box" :class="item.value == payDefValue ? 'active':''" v-for="item in payicon"
				@click="clickPayBtn(item.value)">
				<u-icon :name="item.icon" class="icon" size="26" :color="item.color"></u-icon>
				<text class="font">{{item.name}}</text>
			</view>
		</view>
		<!-- #endif -->

		<view class="payTabbar">
			<car-layout type="pay" :payBtnState="payBtnState" @confirmPay="onConfirmPay"></car-layout>
		</view>

		<view class="">
			<!-- <uni-pay ref="pay" returnUrl="/pages/order/order" @success="paySuccess" @cancel="payCancel"
				@create="payCreate"></uni-pay> -->
			<uni-pay ref="pay"  return-url="/pages/order/detail" logo="/static/logo.png" @success="paySuccess" @cancel="payCancel"></uni-pay>
		</view>

	</view>
</template>

<script>
	const addressCloudObj = uniCloud.importObject("wanshop-mall-address")
	const orderCloudObj = uniCloud.importObject("wanshop-mall-order")
	import {
		mapGetters,mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				deliveryInfo: {
					address: "",
					username: "",
					mobile: ""
				},

				// #ifdef APP-PLUS || H5
				payDefValue: "alipay",
				// #endif

				// #ifdef MP-WEIXIN
				payDefValue: "wxpay",
				// #endif

				payicon: [{
					name: "支付宝",
					value: "alipay",
					icon: "zhifubao-circle-fill",
					color: "#1578ff"
				}, {
					name: "微信",
					value: "wxpay",
					icon: "weixin-fill",
					color: "#04C15F"
				}],
				payLoading:true
			};
		},
		computed: {
			...mapGetters(["carsList", "totalPrice", "disPrice"]),
			payBtnState() {
				let bool = Object.keys(this.deliveryInfo).every(item => {
					return this.deliveryInfo[item] != ""
				})
				return this.carsList.length > 0 && this.totalPrice > 0 && bool && this.payLoading
			}
		},
		onLoad() {
			console.log(this.totalPrice);
			this.getDefAddress()
			uni.$on("selectAddressEvent", (e) => {
				console.log(e);
				this.deliveryInfo = e
			})
		},
		onUnload() {
			uni.$off("selectAddressEvent")
			
		},
		methods: {
			...mapMutations(["CLEAR_CAR"]),
			async onConfirmPay() {
				this.payLoading = false
				let obj = {
					deliveryInfo: this.deliveryInfo,
					carsList: this.carsList,
					createTime: Date.now(),
					payType: this.payDefValue,
					status: 0,
					total_fee:this.totalPrice,
					done: false,
					out_trade_no:""
				}

				let order_no = await orderCloudObj.createOrder(obj);
				// let out_trade_no = order_no   

				let out_trade_no = order_no + "_" + String(Math.random()).substring(3, 9)
				console.log(order_no);

				try {
					// 假设uniPay组件有一个create方法来创建支付请求
					await this.$refs.pay.createOrder({
						provider: this.payDefValue, // 支付供应商
						total_fee: this.totalPrice * 100, // 支付金额，单位分 100 = 1元
						type: "goods", // 支付回调类型
						order_no, // 业务系统订单号
						out_trade_no, // 插件支付单号
						description: order_no, // 支付描述
					});
					console.log("支付请求已发送:", this.payDefValue,this.total_fee,);
				} catch (error) {
					console.error('支付请求失败:', error);
				};
			},

			// 支付成功
			paySuccess(e) {
				let OrderInfo = {
					order_no:e.pay_order.order_no,
					out_trade_no:e.pay_order.out_trade_no
				}
				console.log(OrderInfo);
				orderCloudObj.updateOutOrderNo(OrderInfo).then(res =>{
					console.log(res);
				})
				console.log(e);
				this.payLoading = true;
				this.CLEAR_CAR();
			},
			payCancel(e) {
				console.log(e);
			},
			payCreate(e) {
				console.log(e);
			},
			// 发起支付





			// 选择支付类型
			clickPayBtn(value) {
				this.payDefValue = value
			},
			// 获取默认地址
			async getDefAddress() {
				let res = await addressCloudObj.getDefAddress();
				if (!res.data.length) return
				let {
					address,
					area_name,
					username,
					mobile
				} = res.data[0];
				this.deliveryInfo = {
					address: area_name + address,
					username,
					mobile
				}
				// console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.paypage {
		padding: 20rpx;

		.goodsList {
			margin-top: 30rpx;
		}

		.paytype {
			@include flex-box();

			.box {
				width: 49%;
				height: 75rpx;
				background: #ffffff;
				border-radius: 10rpx;
				@include flex-box-set();
				border: 1rpx solid #fff;
				filter: grayscale(100%);

				.font {
					padding-left: 10rpx;
				}

			}

			.box:first-child.active {
				border-color: #1578ff;
				color: #1578ff;
				filter: grayscale(0%);
			}

			.box:last-child.active {
				border-color: #04C15F;
				color: #04C15F;
				filter: grayscale(0%);
			}
		}

		.payTabbar {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
		}
	}
</style>